<template>
	<div class="login-wrap">
		<div class="ms-title">社区健康管理平台</div>
		<div class="ms-login">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
				<el-form-item prop="username">
					<el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitForm">登录</el-button>
				</div>
				<div class="register-btn">
					<el-button type="primary" @click="registerForm">注册</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		mixin
	} from "../../mixins/index";
	import {
		getLoginStatus
	} from "../../api/index.js";
	export default {
		mixins: [mixin],
		data() {
			return {
				ruleForm: {
					username: "",
					password: ""
				},
				rules: {
					username: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}]
				}
			}
		},
		methods: {
			submitForm() {
				let params = new URLSearchParams();
				const username = this.ruleForm.username;
				params.append("name", username);
				params.append("password", this.ruleForm.password);
				getLoginStatus(params)
					.then((res) => {
						if (res.code == 1) {
							localStorage.setItem('username',username);
							this.$router.push("/info");
							this.notify("登陆成功", "success");
						} else {
							this.notify("登陆失败", "error");
						}
					});
			},
			registerForm() {
				this.$router.push("/register");
			}
		}
	}
</script>

<style>
	.login-wrap {
		position: relative;
		background: url("../../assets/img/background.png") center/cover no-repeat fixed;
		width: 100%;
		height: 100vh;
		min-height: 100%;
	}

	.ms-title {
		position: absolute;
		top: 10%;
		width: 100%;
		text-align: center;
		font-size: 30px;
		font-weight: 600;
		color: black;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	}

	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 300px;
		padding: 40px;
		border-radius: 5px;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.el-form-item {
		margin-bottom: 22px;
	}

	.el-input__inner {
		height: 36px;
		line-height: 36px;
	}

	.login-btn {
		text-align: center;
	}

	.login-btn .el-button {
		width: 100%;
		height: 36px;
		padding: 0;
	}

	.register-btn {
		text-align: center;
	}

	.register-btn .el-button {
		width: 100%;
		height: 36px;
		padding: 0;
	}
</style>